import { Button, Modal, Table, Checkbox, Form, Divider, Input, message } from 'antd';
import { useEffect, useState } from 'react';
import { getIdentifyList, getRouterList, addRouter, updateIdentifyRouter } from '../../api/login';
import { useDispatch } from 'react-redux'
import { myRoute } from '../../store/reducers/route'

import './pagesManage.css'
function PagesManage() {
    const columns = [
        {
            title: '身份',
            dataIndex: 'identify',
            render: (row) => {
                return row == 1 ? '管理员' : '用户'
            }
        },
        {
            title: '操作',
            width: '300px',
            render: (rowData) => {
                return (
                    <div>
                        <Button type="primary" className='config' onClick={() => { handleClick(rowData) }}>配置菜单</Button>
                        {/* <Button type="primary" danger>删除</Button> */}
                    </div>
                )
            }
        }
    ]
    // 定义表单实例
    const [form] = Form.useForm()
    const [form1] = Form.useForm()
    // 定义身份的响应式
    const [identifyList, setIdentifyList] = useState([])
    // 定义模态框状态的响应式
    const [isAddModalOpen, setIsAddModalOpen] = useState(false)
    // 定义添加路由页面模态框的响应式
    const [ispagesModalOpen, setIspagesModalOpen] = useState(false)
    function handleClick(row) {
        setIsAddModalOpen(!isAddModalOpen)
        console.log(row, 'row');
        let listArr = []
        getIdentifyList({ identify: row.identify }).then((res) => {
            console.log(res, '更改后的res');
            res.data.forEach(item => {
                listArr.push(item.label)
            })
            setCheckedList(listArr)
        })


        // optionList是所有的菜单， 而我要把所有的菜单都展示出来，然后根据上面传了 identify 得到的菜单进行回填
        let listArr2 = []
        optionsList.forEach(item => {
            listArr2.push(item.label)
        })
        //设置全部的选项(此处是为了把所有的菜单---》 转换为多选框需要的格式)
        setCheckOptions(listArr2)

        // id表单回填
        const cloneRow = {
            id: row.id,
        }
        form.setFieldsValue(cloneRow)
    }

    const dispatch = useDispatch()
    // 确认表单内容
    function handleOk() {
        form.validateFields().then((val) => {
            let data = {
                identify: val.id,
                routeLabel: checkedList,
            }
            updateIdentifyRouter(data).then((res) => {
                console.log(res, val.id, '更改用户权限');
                const identify = localStorage.getItem('identify')
                if (identify == val.id) {
                    dispatch(myRoute(val.id))
                }
                message.success(res.msg)
                setIsAddModalOpen(!isAddModalOpen)
            })
        })
    }
    // 关闭弹窗
    function handleCancel() {
        setIsAddModalOpen(!isAddModalOpen)
    }
    // 确认表单内容
    function handleOk1() {
        form1.validateFields().then((val) => {
            console.log(val, 'res');
            addRouter(val).then((res) => {
                if (res.code == 200) {
                    message.success('添加成功')
                    setIspagesModalOpen(!ispagesModalOpen)
                } else {
                    message.error(res.msg)
                }
            }).then(() => {
            })
        })
    }
    // 关闭弹窗
    function handleCancel1() {
        setIspagesModalOpen(!ispagesModalOpen)
    }
    // 定义多选框的选中结果
    const [checkedList, setCheckedList] = useState([])
    // 定义总列表
    const [optionsList, setOptionsList] = useState([])
    // 定义多选框的选项
    const [checkOptions, setCheckOptions] = useState([])
    function onchange(list) {
        setCheckedList(list)
    }
    const checkAll = checkOptions.length === checkedList.length;
    const indeterminate = checkedList.length > 0 && checkedList.length < checkOptions.length;
    function onCheckAllChange(e) {
        setCheckedList(e.target.checked ? checkOptions : []);
    }




    useEffect(() => {
        // 获取身份列表
        getIdentifyList().then(res => {
            setIdentifyList(res.data)
        })
        // 获取多选框所有的选项， 然后根据对应身份查找出的菜单进行回填
        getRouterList().then(res => {
            setOptionsList(res.data)
        })
    }, [])
    useEffect(() => {
        console.log(checkOptions, 'checkoptions');
    }, [checkOptions])


    return (
        <div className="pagesManage">
            <div className='pagesTitle'>
                <h2>页面权限管理</h2>
                <Button type="primary" onClick={() => {
                    setIspagesModalOpen(!ispagesModalOpen)
                }}>添加页面</Button>
            </div>
            <div className='pagesTable'>
                {/* 遍历出两个权限角色 */}
                <Table columns={columns} dataSource={identifyList} rowKey='id'></Table>

            </div>
            {/* 添加页面的模态框 */}
            <Modal
                title='添加页面'
                open={isAddModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                okText='确定'
                cancelText='取消'
            >
                <Form
                    form={form}
                >
                    <Form.Item name='id' noStyle>
                        <Input type='hidden'></Input>
                    </Form.Item>
                    <Form.Item label="菜单配置">
                        <Checkbox onChange={onCheckAllChange} checked={checkAll} indeterminate={indeterminate}>选择全部</Checkbox>
                        <Divider></Divider>
                        <Checkbox.Group options={checkOptions} value={checkedList} onChange={onchange}></Checkbox.Group>
                        {/* <Input></Input> */}
                    </Form.Item>
                </Form>
            </Modal>
            <Modal
                title='配置页面路由'
                open={ispagesModalOpen}
                onOk={handleOk1}
                onCancel={handleCancel1}
                okText='确定'
                cancelText='取消'
            >
                <Form
                    form={form1}
                >
                    <Form.Item name='path' label='设置页面路径'>
                        <Input></Input>
                    </Form.Item>
                    <p>注意：页面组件名称单词首字母大写</p>
                    <Form.Item name='component' label='设置页面组件'>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item name='label' label='设置菜单名称'>
                        <Input></Input>
                    </Form.Item>
                </Form>

            </Modal>
        </div>
    )
}

export default PagesManage